import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import hbs from 'htmlbars-inline-precompile';

<Meta title="Components/Organisms/Site Header" />


# Site Header

Site Headers serve as the primary navigation for NYPR web properties. They are always top aligned, they are always navigation focused, they are always on brand. #onbrand

## What’s Inside

Our whitelable Site Header component includes a hamburger menu, placeholders for branding, primary navigation, social links, a primary CTA, a search icon and form field, and a progress bar for article pages. These items are optional to be turned on or off based on the page experience and content.

  
<img alt="Site Header anatomy" src="./images/Organisms-BrandBar-Anatomy.png" width="800" />


1- **Hamburger Menu** - If a site supports sidebar menus, the hamburger navigation is used to launch the menu. More typically seen on mobile where navigation items are shifted from site header to side menu.

2- **Brand Placeholder** - Placeholder for logo of respective site/brand.

3- **Primary Links** - Top level links to larger areas of a site’s domain.

4- **Social Icons** - Link off to a brand's social media accounts. On an article page, these can be replaced with "Share" functionality.

5- **Primary CTA** - Used most times for donate call-to-actions.

6- **Search** - Icon that launches a form field on click. This action hides all items on the right side of the site header to make visual space for the search field.

  

## States

Depending on the platform, a site header can have a number of configurations (states). In Gothamist, the site header swaps its primary navigation for the article headline and share tools when on an article page. When the search state is active, neighboring components hide themselves to make room for the added field. Configuration options are built into our whitelabel component and will expand as we incorporate more brands into Radial. See possible configurations below.

<img alt="Site Header Configurations" src="./images/Organisms-BrandBar-Configurations.png" width="800" />


## Behaviors

By default, Site Headers are sticky, keeping the component accessible from anywhere on a page without having to scroll.

  

## Mobile

On mobile, the majority of components in the Site Header will be hidden as to fit the smaller screensize. In these cases, a Side Menu can be triggered via a hamburger menu or similar icon to show primary and secondary navigation items. In the whitelabel, only the hambuger menu, branding, and primary CTA are shown at a mobile width. 

<img alt="brandbar on mobile" src="./images/Organisms-BrandBar-Mobile.png" width="275" />

  

## Configurations


<Preview withToolbar={true}>
  <Story name="Header Config 1" height="150px">{{
    template: hbs`
          <NyprOHeader
                  @donateURL={{DONATE_URL}}
                  data-test-main-header
                  as |header|
          >
            <header.left data-test-header-left as |left|>
              <left.branding>
                {{#link-to "index"}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo'/>
                {{/link-to}}
              </left.branding>
            </header.left>
            
            <header.nav @navItems={{primaryNav}} data-test-top-nav/>
          
            <header.right data-test-header-right as |right|>
              <NyprAButton class='c-main-header__donate o-button--sm mod-donate' name="donateHeader" @url={{DONATE_URL}}>
                Donate
              </NyprAButton>
              <right.search as |search|>
                <search.open/>
              </right.search>
            </header.right>
          
            <header.menu @donateUrl={{DONATE_URL}} data-test-side-menu as |menu|>
              <menu.branding>
                {{#link-to 'index'}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo' class="site-header-title-logo"/>
                {{/link-to}}
              </menu.branding>
          
              <menu.primaryNav @navItems={{primaryNav}}/>
              
              <menu.component>
                <p><em>slot for component</em></p>
              </menu.component>
              
              <menu.secondaryNav @navItems={{secondaryNav}}/>
          
              <menu.social @label='Follow Us' as |share|>
                <share.link @service='facebook' @username='gothamist'/>
                <share.link @service='twitter' @username='gothamist' />
                <share.link @service='instagram' @username='gothamist' />
              </menu.social>
              
            </header.menu>
          </NyprOHeader>`,
    context: { 
      primaryNav: [
        {
          route: ['index'],
          text: 'Link 1',
        },
        {
          route: ['index'],
          text: 'Link 2',
        },
        {
          route: ['index'],
          text: 'Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

<Preview withToolbar={true}>  
  <Story name="Header Config 2" height="150px">{{
    template: hbs`
          <NyprOHeader
                  @donateURL={{DONATE_URL}}
                  data-test-main-header
                  as |header|
          >
            <header.left data-test-header-left as |left|>
              <left.branding>
                {{#link-to "index"}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo'/>
                {{/link-to}}
              </left.branding>
              <left.headline data-test-top-headline>
                Headline with Lots of Text Can Sit Here
              </left.headline>
            </header.left>
          
            <header.right data-test-header-right as |right|>
              <NyprMShareTools class="c-main-header__share" as |tools|>
                <tools.share
                  @service='facebook'
                  @utm={{hash medium='social' source='facebook' campaign='shared_facebook'}}
                  data-test-facebook-share
                />
                <tools.share
                  @service='twitter'
                  @params={{hash text=share.title via='gothamist'}}
                  @utm={{hash medium='social' source='twitter' campaign='shared_twitter'}}
                  data-test-twitter-share
                />
                <tools.share
                  @service='reddit'
                  @params={{hash title=share.title}}
                  @utm={{hash medium='social' source='reddit' campaign='shared_reddit'}}
                  data-test-reddit-share
                />
                <tools.share
                  @service='email'
                  @params={{hash body=(concat share.title ' - {{URL}}')}}
                  @utm={{hash medium='social' source='email' campaign='shared_email'}}
                  data-test-email-share
                />
              </NyprMShareTools>
              <NyprAButton class='c-main-header__donate o-button--sm mod-donate' name="donateHeader" @url={{DONATE_URL}}>
                Donate
              </NyprAButton>
              <right.search as |search|>
                <search.open/>
              </right.search>
            </header.right>
          
            <header.menu @donateUrl={{DONATE_URL}} data-test-side-menu as |menu|>
              <menu.branding>
                {{#link-to 'index'}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo' class="site-header-title-logo"/>
                {{/link-to}}
              </menu.branding>
          
              <menu.primaryNav @navItems={{primaryNav}}/>
              
              <menu.component>
                <p><em>slot for component</em></p>
              </menu.component>
              
              <menu.secondaryNav @navItems={{secondaryNav}}/>
          
              <menu.social @label='Follow Us' as |share|>
                <share.link @service='facebook' @username='gothamist'/>
                <share.link @service='twitter' @username='gothamist' />
                <share.link @service='instagram' @username='gothamist' />
              </menu.social>
              
            </header.menu>
          </NyprOHeader>`,
    context: {
      primaryNav: [
        {
          route: ['index'],
          text: 'Link 1',
        },
        {
          route: ['index'],
          text: 'Link 2',
        },
        {
          route: ['index'],
          text: 'Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

<Preview withToolbar={true}>  
  <Story name="Header Config 3" height="150px">{{
    template: hbs`
          <NyprOHeader
                  @showMenuButton=true
                  @donateURL={{DONATE_URL}}
                  data-test-main-header
                  as |header|
          >
            <header.left data-test-header-left as |left|>
              <left.branding>
                {{#link-to "index"}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo'/>
                {{/link-to}}
              </left.branding>
            </header.left>
          
            <header.right data-test-header-right as |right|>
              <NyprMShareTools class="c-main-header__share" as |tools|>
                <tools.share
                  @service='facebook'
                  @utm={{hash medium='social' source='facebook' campaign='shared_facebook'}}
                  data-test-facebook-share
                />
                <tools.share
                  @service='twitter'
                  @params={{hash text=share.title via='gothamist'}}
                  @utm={{hash medium='social' source='twitter' campaign='shared_twitter'}}
                  data-test-twitter-share
                />
                <tools.share
                  @service='reddit'
                  @params={{hash title=share.title}}
                  @utm={{hash medium='social' source='reddit' campaign='shared_reddit'}}
                  data-test-reddit-share
                />
                <tools.share
                  @service='email'
                  @params={{hash body=(concat share.title ' - {{URL}}')}}
                  @utm={{hash medium='social' source='email' campaign='shared_email'}}
                  data-test-email-share
                />
              </NyprMShareTools>
              <NyprAButton class='c-main-header__donate o-button--sm mod-donate' name="donateHeader" @url={{DONATE_URL}}>
                Donate
              </NyprAButton>
              <right.search as |search|>
                <search.open/>
              </right.search>
            </header.right>
          
            <header.menu @donateUrl={{DONATE_URL}} data-test-side-menu as |menu|>
              <menu.branding>
                {{#link-to 'index'}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo' class="site-header-title-logo"/>
                {{/link-to}}
              </menu.branding>
          
              <menu.primaryNav @navItems={{primaryNav}}/>
              
              <menu.component>
                <p><em>slot for component</em></p>
              </menu.component>
              
              <menu.secondaryNav @navItems={{secondaryNav}}/>
          
              <menu.social @label='Follow Us' as |share|>
                <share.link @service='facebook' @username='gothamist'/>
                <share.link @service='twitter' @username='gothamist' />
                <share.link @service='instagram' @username='gothamist' />
              </menu.social>
              
            </header.menu>
          </NyprOHeader>`,
    context: {
      primaryNav: [
        {
          route: ['index'],
          text: 'Link 1',
        },
        {
          route: ['index'],
          text: 'Link 2',
        },
        {
          route: ['index'],
          text: 'Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>

<Preview withToolbar={true}>  
  <Story name="Header Config 4" height="150px">{{
    template: hbs`
          <NyprOHeader
                  @showMenuButton={{false}}
                  @donateURL={{DONATE_URL}}
                  data-test-main-header
                  as |header|
          >
            <header.left data-test-header-left as |left|>
              <left.branding>
                {{#link-to "index"}}
                  <Icon @icon='gothamist/logo' @title='gothamist logo'/>
                {{/link-to}}
              </left.branding>
            </header.left>
          
            <header.right data-test-header-right as |right|>
              <NyprMShareTools class="c-main-header__share" as |tools|>
                <tools.share
                  @service='facebook'
                  @utm={{hash medium='social' source='facebook' campaign='shared_facebook'}}
                  data-test-facebook-share
                />
                <tools.share
                  @service='twitter'
                  @params={{hash text=share.title via='gothamist'}}
                  @utm={{hash medium='social' source='twitter' campaign='shared_twitter'}}
                  data-test-twitter-share
                />
                <tools.share
                  @service='reddit'
                  @params={{hash title=share.title}}
                  @utm={{hash medium='social' source='reddit' campaign='shared_reddit'}}
                  data-test-reddit-share
                />
                <tools.share
                  @service='email'
                  @params={{hash body=(concat share.title ' - {{URL}}')}}
                  @utm={{hash medium='social' source='email' campaign='shared_email'}}
                  data-test-email-share
                />
              </NyprMShareTools>
              <NyprAButton class='c-main-header__donate o-button--sm mod-donate' name="donateHeader" @url={{DONATE_URL}}>
                Donate
              </NyprAButton>
              <right.search as |search|>
                <search.open/>
              </right.search>
            </header.right>
          </NyprOHeader>`,
    context: {
      primaryNav: [
        {
          route: ['index'],
          text: 'Link 1',
        },
        {
          route: ['index'],
          text: 'Link 2',
        },
        {
          route: ['index'],
          text: 'Link 3',
        }
      ],
      secondaryNav: [
        {
         route: ['index'],
         text: 'Secondary Link 1',
        },
        {
         route: ['index'],
         text: 'Secondary Link 2',
        },
        {
         route: ['index'],
         text: 'Secondary Link 3',
        }
      ],
      tertiaryNav: [
        {
         route: ['index'],
         text: 'Tertiary Link 1',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 2',
        },
        {
         route: ['index'],
         text: 'Tertiary Link 3',
        }
      ]
    }
  }}</Story>
</Preview>